<template>
  <el-dialog
    class="detection-task-plan-dialog"
    width="1000px"
    :visible.sync="dialogVisible"
    title="任务计划"
    :close-on-click-modal="false"
    :append-to-body="true"
    v-dialogDrag="true"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <table class="task-plan-table" cellspacing="0" cellpadding="0" border>
      <thead>
        <tr>
          <th colspan="2">计划日期</th>
          <th rowspan="2">计划内容</th>
          <th rowspan="2" style="width: 120px;">相关负责人</th>
          <th rowspan="2" style="width: 150px;">备注</th>
        </tr>
        <tr>
          <th style="width: 130px;">起</th>
          <th style="width: 130px;">止</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in taskPlanList" :key="index">
          <td>
            <el-date-picker
              v-model="item.start"
              type="date"
              :clearable="false"
              placeholder=""
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </td>
          <td>
            <el-date-picker
              v-model="item.end"
              type="date"
              :clearable="false"
              placeholder=""
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </td>
          <td>
            <el-input
              type="textarea"
              v-model="item.content"
              :clearable="false"
              placeholder=""
              :autosize="{ minRows: 1 }"
            ></el-input>
          </td>
          <td>
            <el-input v-model="item.accountableParty" :clearable="false" placeholder=""></el-input>
          </td>
          <td>
            <el-input
              type="textarea"
              v-model="item.remark"
              :clearable="false"
              placeholder=""
              :autosize="{ minRows: 1 }"
            ></el-input>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="dialog-footer" slot="footer">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getDetectionTaskPlanById,
  addDetectionTaskPlan,
  editDetectionTaskPlan
} from '@/api/slides/detectionTogether'

export default {
  name: 'DetectionTaskPlanDialog',
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => ({})
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  data() {
    return {
      tableLoading: false,
      taskPlanId: null,
      taskPlanList: []
    }
  },
  created() {
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
      this.getDetectionTaskPlanContent()
    },
    // 弹框关闭时
    handleDialogClosed() {
      this.tableLoading = false
      this.taskPlanId = null
      this.taskPlanList = []
    },
    // 获取任务计划内容
    getDetectionTaskPlanContent() {
      this.tableLoading = true
      const taskDetectionTogetherId = this.row.taskDetectionTogetherId
      getDetectionTaskPlanById({ taskDetectionTogetherId }).then(res => {
        this.tableLoading = false
        this.taskPlanId = res.data.taskPlanId
        this.taskPlanList = res.data.contentObj || []
      }).catch(err => {
        this.tableLoading = false
      })
    },
    // 获取保存参数数据
    getFormData() {
      const data = {
        taskDetectionTogetherId: this.row.taskDetectionTogetherId,
        taskPlanId: this.taskPlanId,
        contentObj: this.taskPlanList
      }
      if (!this.taskPlanId) delete data.taskPlanId
      return data
    },
    // 提交
    handleSubmit() {
      const data = this.getFormData()
      let fn = null
      if (data.taskPlanId) fn = editDetectionTaskPlan
      else fn = addDetectionTaskPlan
      fn(data).then(res => {
        this.$message.success('保存成功')
        this.dialogVisible = false
      }).catch(err => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.detection-task-plan-dialog {

  ::v-deep .el-dialog__body {
    padding: 20px 20px 30px;
    max-height: 70vh;
    overflow-y: auto;
  }

  table.task-plan-table {
    width: 100%;
    border-color: #dfe6ec;
    border-collapse: collapse;

    thead tr th {
      height: 34px;
      text-align: center;
    }

    tbody tr td {
      height: 40px;
    }

    ::v-deep .el-input {
      width: 100%;
      height: 100%;
    }
    ::v-deep .el-input .el-input__inner {
      width: 100%;
      height: 100%;
      border: none;
    }

    ::v-deep .el-textarea {
      width: 100%;
      height: 100%;
    }
    ::v-deep .el-textarea .el-textarea__inner {
      width: 100%;
      min-height: 100% !important;
      border: none;
      resize: none;
    }

    ::v-deep .el-date-editor {
      width: 100%;
      height: 100%;
    }
    ::v-deep .el-date-editor .el-input__inner {
      padding: 0 10px;
      width: 100%;
      height: 100%;
      border: none;
    }
    ::v-deep .el-date-editor .el-input__prefix {
      display: none;
    }
  }
}
</style>